<template>
  <div>
    <div class="center" v-for="(item, index) in data" :key="item.id">
      <div class="container">
        <div class="container-top">
          <div class="container-top-img" @click="gotoMypage(item)">
            <!-- <img :src="item.face" alt="" /> -->
            <Avatar
                shape="circle"
                :src="item.face"
                @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
                icon="ios-person"
                size="28"
              />
          </div>
          <div class="container-top-center">
            <div class="container-top-true">
              <div class="container-top-title">
                <div class="container-top-one">
                  <span>{{ item.nick_name||'--' }}</span>
                  <div class="container-lable-yd">
                    {{ getAuthenticatioStatus(item) }}
                    <!-- <span>{{ item.lab }}</span> -->
                  </div>
                  <div class="container-circle" @click="handleLook(item)">
                    {{ item.haved === 0 ? "+关注" : "已关注" }}
                  </div>
                </div>
                <div class="container-top-two">{{ item.creattime }}</div>
              </div>
              <div class="containerTitle">{{item.title}}</div>
              <div class="container-contoin" @click="handleDetail(item)">
                {{ item.content }}
              </div>
              <div class="main-container" v-if="item.type == 1">
                <div v-if="index !== bigIndex" class="img-box">
                  <div v-if="item.thumbs">
                    <img
                      class="main-img"
                      v-for="(v, i) in item.thumbs.split(',')"
                      @click="lookBig1(v, index)"
                      :key="i"
                      :src="v"
                      alt=""
                    />
                  </div>
                </div>
                <div class="img-box" v-if="bigImg && bigIndex == index">
                  <img :src="bigimg" class="bigImg" alt="" />
                  <div class="imgList">
                    <img
                      class="imgList-img"
                      @click="lookBig2(a, j)"
                      v-for="(a, j) in item.thumbs.split(',')"
                      :key="j"
                      :src="a"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div v-if="item.type == 2" class="container-video">
                <video controls class="video-bb" :src="item.video"></video>
              </div>
            </div>
          </div>
        </div>
        <div class="container-but">
          <div class="ribbon" @click="collect(item.id, 2)">
            <Icon :type="item.havesc===1? 'md-star':'ios-star-outline'"
             :color="item.havesc===1?'#FDCD10':''" /> <span>{{ item.is_sc }}</span>
          </div>
          <div class="ribbon" @click="collect(item.id, 3)">
            <Icon type="ios-share-outline" /> <span>{{ item.is_zf }}</span>
          </div>
          <div class="ribbon" @click="handleDetail(item)">
            <Icon type="ios-text-outline" /> <span>{{ item.is_comits }}</span>
          </div>
          <div class="ribbon npk" @click="collect(item.id, 1)">
            <Icon type="ios-thumbs-up" color="#fdcd10"  v-show="item.havedz"/>
          <Icon type="ios-thumbs-up-outline"  v-show="!item.havedz"/> <span>{{ item.is_like }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { nicetopic, setdlc,followUser } from "@/api/community";
import { time } from "@/config/time";
export default {
  props: {
    seachVal: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      bigimg: "",
      bigIndex: 0,
      bigImg: false,
      data: [],
      lookme: true,
      mid:JSON.parse(localStorage.userInfo).id,
      timer:null
    };
  },
  watch: {
    seachVal() {
      if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.getlist();
        }, 600);
    }
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getAuthenticatioStatus(item) {
      if (item.authent && item.authent.status === 1) {
        return item.authent.title;
      }
      return "";
    },
    // 放大图片
    lookBig1(img, index) {
      this.bigimg = img;
      this.bigIndex = index;
      this.bigImg = true;
    },
    lookBig2(img, index) {
      this.bigimg = img;
    },
    // 关注
    handleLook(item) {
      followUser({
        foucsid: item.aouthid,
        mid: this.mid,
        type: item.haved === 1 ? 0: 1
      }).then(res => {
        if(res.code === 1){
          this.getlist()
        }
      })
      // this.lookme = !this.lookme;
    },
    // 精选数据
    getlist() {
      let npk = {
        mid: this.mid,
        page: 1,
        pagesize: 10000,
        keyword: this.seachVal || "",
      };
      nicetopic(npk).then((res) => {
        console.log(res);
        this.data = res.data.map((v) => {
          v.creattime = time.getTime(v.creattime);
          return v
        });
        // q12e12
      });
    },
    // 一键三连
    collect(id, type) {
      let data = {
        topicid: id,
        type: type,
        // mid: uni.getStorageSync("user_info_obj_dev").id,
        mid: this.mid,
      };
      setdlc(data).then((res) => {
        this.getlist();
      });
    },
    // 跳转到主页
    gotoMypage(item) {

      this.$router.push(
        {
          path: "/personalpage",
          query: {
            aouthid: item.aouthid
          }
        },
        console.log()
      );
    },
    // 跳转详情
    handleDetail(item) {
      this.$router.push({
        path: "/comment",
        query: {
          id: item.id,
          my: item.my,
          type: item.type,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
  width: 100%;
  // height: 500px;
  // border: 1px solid red;
  // background-color: #FD5151;
  margin-bottom: 9px;
  .container {
    width: 100%;
    // height: 350px;
    // border: 1px solid rgb(27, 98, 213);
    border-radius: 6px;
    background-color: #fff;

    .container-top {
      width: 100%;
      // height: calc(350px - 36px);
      min-height: 0px;
      // border: 1px solid red;
      padding-top: 12px;
      display: flex;
      justify-content: flex-start;
      .container-top-img {
        width: 28px;
        height: 100%;
        margin-left: 12px;
        > img {
          width: 28px;
          height: 28px;
          border-radius: 50%;
        }
      }
      .container-top-center {
        width: 100%;
        height: 100%;
        // background-color: rgb(43, 12, 12);
        padding-right: 45px;
        .container-top-true {
          width: 100%;
          height: 100%;
          // background-color: rgb(26, 44, 162);
          .container-top-title {
            width: 100%;
            height: 38px;
            // border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 9px;
            .container-top-one {
              width: 100%;
              height: 14px;
              font-size: 8px;
              font-weight: 500;
              color: #333333;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              position: relative;
              .container-circle {
                position: absolute;
                width: 60px;
                height: 14px;
                background-color: #f78686;
                right: 0;
                text-align: center;
                line-height: 14px;
                font-size: 12px;
                border-radius: 7px;
                color: #ef3434;
                cursor: pointer;
              }
              .container-lable-yd {
                width: auto !important;
                padding: 0 6px;
                height: 11px;
                // background: #FCF0F0;
                border-radius: 2px;
                width: 20px;
                font-size: 7px;
                font-weight: 400;
                color: #fd5151;
                line-height: 11px;
                margin-left: 10px;
              }
            }
            .container-top-two {
              width: 100%;
              height: 14px;
              font-size: 7px;

              font-weight: 400;
              color: #acacac;
            }
          }
          .containerTitle {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
          }
          .container-contoin {
            margin-bottom: 12px;
            font-size: 8px;
            font-weight: 400;
            color: #333333;
            line-height: 14px;
            // border: 1px solid red;
          }
          .main-container {
            width: 100%;
            min-height: 0px;
            // background-color: #FD5151;
            display: flex;
            flex-wrap: wrap;
            .img-box {
              width: 100%;
              .main-img {
                cursor: pointer;
                width: 32%;
                display: inline-block;
                height: 86px;
                background: #dedede;
                object-fit: scale-down;
                border-radius: 3px;
                margin-bottom: 7px;
              }
              .bigImg {
                // width: 100%;
                max-height:400px;
                // height: 200px;

              }
              .imgList {
                width: 100%;
                .imgList-img {
                  width: 50px;
                  height: 50px;
                  margin: 10px;
                  object-fit: scale-down;
                  background-color: #dedede;
                }
              }
            }
            .main-img {
              width: 32%;
              display: inline-block;
              height: 86px;
              background: #dedede;
              object-fit: scale-down;
              border-radius: 3px;
              margin-bottom: 7px;
            }
          }
          .container-video {
            width: 100%;
            // height: 313px;
            .video-bb {
              width: 100%;
              max-height: 200px;
              // height: 178px;
            }
          }
        }
      }
    }
    .container-but {
      widows: 100%;
      // background-color: rgb(49, 103, 197);
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #ececec;
      .ribbon {
        width: 25%;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #ececec;
      }
      .npk {
        border-right: none;
      }
    }
  }
}
</style>
